<template>
    <div v-if="page.total" class="table-footer">
        <div class="list-info">
            <i18n path="common.base.table.totalCount">
                <span place="count" class="level-padding">{{page.total}}</span>
            </i18n>
        </div>

        <el-pagination
            class="table-pagination"
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :page-sizes="defaultTableData.defaultPageSizes"
            :page-size="page.pageSize"
            :current-page="page.pageNum"
            layout="prev, pager, next, sizes, jumper"
            :total="page.total">
        </el-pagination>
    </div>
</template>

<script>
import { defaultTableData } from '@src/util/table'
export default {
    name:'pagination',

    data(){
        return {
            defaultTableData
        }
    },

    props:{
        value:{
            type:Object,

            validator:(val) => {
                const keys = Object.keys(val);
                return keys.includes('total') && keys.includes('pageSize') && keys.includes('pageNum')
            },
        
            default:() => {
                return {
                    total:0,
                    pageSize:10,
                    pageNum:1
                }
            }
        }
    },

    computed:{
        page:{
            set(newPage){
                this.$emit('updata:value',newPage)
            },

            get(){
                return this.value
            }
        }
    },

    methods:{
        handleSizeChange(val) {
            this.page.pageNum = 1
            this.page.pageSize = val

            this.$emit('handleSizeChange')
        },

        handleCurrentChange(val) {
            this.page.pageNum = val

            this.$emit('handleCurrentChange')
        }
    }
}
</script>

<style lang="scss" scoped>
.table-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>